/**
 * Copyright (c) 2021 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import '../../base/base_color.scss';
.container {
    width: 100%;
    height: 100%;
}
.tabs-records {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.tab-bar-box {
    width: 72%;
    height: 100px;
}
.tab-bar-box-display {
    width:60%;
    height: 0px;
    animation-name: displayTabBar;
    animation-fill-mode: forwards;
    animation-duration: 3000ms;
    animation-delay: 0ms;
}

.tab-bar-box text:active{
    font-weight: 600;
    color: $textColorTabBar;
}
.tab-bar-title{
    width:120px;
}
.tab-content-box {
    width: 100%;
    height: 100%;
    justify-content: center;
}
.tab-content-box-hide-bar {
    width: 100%;
    height: 100%;
    justify-content: center;
}
.tab-content-container {
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.allrecords-list {
    flex-direction: column;
    columns: 1;
}
.list-item-content {
    width: 100%;
    height: 130px;
}
.allrecords-list-item {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.allrecords-item-icon-left {
    flex-direction: column;
    align-items: center;
    width: 90px;
    padding-top: 5px;
}
.allrecords-item-content {
    flex-direction: row;
    height: 100%;
    width: 500px;
    flex-grow:1;
    align-items: flex-start;
}

.allrecords-item-right {
    height: 100%;
    width:130px;
    justify-content: center;
    align-items: center;
}
.records-delete-box {
    height: 80px;
    width: 80px;
    background-color: red;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
}
.one-btn {
    width: 180px;
    margin-right: -180px;
}
.records-delete-image {
    height:80px;
    width: 80px;
}
.allrecords-item-right-text {
    height:100%;
    align-items:center;
    font-size: 26px;
    font-weight: 500;
    color: gray;
    max-lines: 1;
    text-align: right;
    max-width: 310px;
    min-width: 50px;
    flex-basis: 160px;
    margin-right: 0px;
    text-overflow: ellipsis;
    flex-grow:2;
}
.allrecords-item-right-image {
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 10px;
}
.allrecords-item-right-checkbox {
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 110px;
    border-radius: 10px;
}
.allrecords-item-right-image:active {
    background-color: lightgray;
}
.allrecords-item-right-image-icon {
    height: 50px;
    width: 50px;
}
.allrecords-item-delete {
    top: 0px;
    height: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #F2F2F2;
}
.allrecords-list-item-line {
    width: 100%;
    margin-right: 40px;
    margin-left: 87px;
    height: 1px;
    border-bottom: 1px;
    border-color: lightgray;
}
.allrecords-list-item-padding {
    width: 100%;
    height: 200px;
}
.list-item-log {
    flex-direction: column;
    align-items: center;
}

.allrecords-list-item-delete {
    width: 120%;
    height: 12%;
    padding-top: 14px;
    padding-bottom: 15px;
    animation-name: displayDeleteButton;
    animation-fill-mode: forwards;
    animation-duration: 3000ms;
    animation-delay: 1000ms;
}
.allrecords-item-icon-left-image {
    height: 30px;
    width: 30px;
    opacity: .5;
}
.voicemail-item-icon-left-image {
    margin-top:10px;
    height: 30px;
    width: 30px;
}
.voicemail-detail {
    width: 100%;
    margin-right: 40px;
    margin-left: 87px;
    flex-direction: column;
    height: 240px;
}
.voicemail-progress-box {
    flex-direction: row;
    align-items: center;
    height:120;
}
.voicemail-options-box {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    height:120;
}
.option-image-box {
    justify-content:center;
    align-items:center;
    width:100px;
    height:100px;
    border-radius:10px;
}
.option-image-box:active{
    background-color: lightgray;
}
.voicemail-detail-option-image {
    width:50px;
    height:50px;
}

.voicemail-duration-text-start {
    color:gray;
    width:130px;
    text-align: left;
    flex-shirik:0;
}
.voicemail-duration-text-end {
    color:gray;
    width:130px;
    text-align: right;
    flex-shirik:0;
}
.voicemail-detail-progress {
    width:100%;
}
.allrecords-item-content-middle-box {
    height: 50%;
    align-items: center;
}
.allrecords-item-content-middle-data {
    flex-direction: column;
    min-width: 0px;
    max-width: 400px;
    flex-grow: 1;
}
.allrecords-item-content-middle-text {
    font-size: 32px;
    font-weight: 600;
    max-lines: 1;
    min-width:0px;
    max-width:350px;
    text-overflow: ellipsis;
    margin-right: 5px;
}
.allrecords-item-content-middle-text-red {
    font-size: 32px;
    font-weight: 600;
    max-lines: 1;
    min-width:0px;
    max-width:350px;
    text-overflow: ellipsis;
    margin-right: 5px;
    color: #e80000;
}
.allrecords-item-number {
    font-size: 30px;
    font-weight: 600;
    min-width:0px;
    max-width:200px;
    flex-basis:130px;
    flex-grow: 1;
}
.allrecords-item-number-red {
    font-size: 30px;
    font-weight: 600;
    min-width:0px;
    max-width:200px;
    flex-basis:130px;
    flex-grow: 1;
    color: #e80000;
}
.allrecords-item-content-middle-bottom-image {
    width: 25px;
    height: 25px;
    opacity: .5;
    margin-right:6px;
}
.allrecords-item-content-middle-bottom-text {
    font-size: 26px;
    font-weight: 500;
    color: gray;
    max-lines: 2;
    max-width: 310px;
    min-width: 50px;
    text-overflow: ellipsis;
}

.tab-content-no-missed-calls {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}
.tab-content-no-voice-mail {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}
.empty-list-image {
    height: 160px;
    width: 160px;
}
.empty-list-text {
    font-size: 28px;
    color: gray;
}

@keyframes displayDeleteButton {
        from{
            transform: translateX(0%);
        }
        to{
            transform: translateX(-10%);
        }
}
@keyframes displayTabBar {
    from{
        height:0px;
        transform: translateY(0px);
    }
    to{
        height:120px;
        transform: translateY(120px);
    }
}
